<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/head::head">
</head>

<body>
<div class="layui-container">
    <form action="./saveDynamic.json" class="layui-form" id="form">
        <div class="layui-collapse" style="margin: 10px;">
            <div class="layui-colla-item" th:id="${item.key.name()}+'div'" style="display: none;"
                 th:name="${item.key.name()}"
                 th:unless="${item.key.parent}"
                 th:each="item : ${dynamicDataMap}">
                <div class="layui-colla-title">
                    <div th:text="${item.key.name}">
                    </div>
                </div>
                <div class="layui-colla-content layui-show">
                    <div th:id="'tree_'+${item.key.name()}">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="padding-left: 20%;margin-top: 20px;">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submit">提交
            </button>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
    var id = getQueryString("id");
    var tree;
    var layIndex;
    var layCount = layEndCount = 0;

    function loadSuccess() {
        layui.use('tree', function () {
            tree = layui.tree;
            layIndex = layer.load(1, {
                shade: [0.3, '#fff']
            });
            $(".layui-colla-item").each(function () {
                var find = $(this).find(".layui-colla-content div");
                var attr = find.attr("id");
                var ts = attr.split("_");
                getData(ts[1]);
            })
        });
        //
        form.on('submit(submit)', function (data) {
            var checkDyData = {};
            $(".layui-colla-item").each(function () {
                var find = $(this).find(".layui-colla-content div");
                var attr = find.attr("id");
                if ($(this).is(":hidden")) {
                    return;
                }
                try {
                    var checkData = tree.getChecked(attr);
                    var ts = attr.split("_");
                    checkDyData[ts[1]] = checkData;
                } catch (e) {
                    console.error(e);
                }
            });
            var dynamic = JSON.stringify(checkDyData);
            loadingAjax({
                url: data.form.action,
                data: {
                    dynamic: dynamic,
                    id: id
                },
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 === data.code) {
                        autoClose();
                    }
                }
            });
            return false;
        });
    }

    function getData(dy) {
        layCount++;
        silentAjax({
            url: './getDynamic.json',
            data: {
                id: id,
                dynamic: dy
            },
            success: function (data) {
                if (data.code !== 200) {
                    layer.msg(data.msg);
                    return;
                }
                if (!data.data || data.data.length <= 0) {
                    return;
                }
                tree.render({
                    elem: '#tree_' + dy,
                    data: data.data,
                    id: "tree_" + dy,
                    showCheckbox: true,
                    click: function (obj) {
                    }
                });
                $("#" + dy + "div").show();
            },
            complete: function () {
                layEndCount++;
                if (layCount === layEndCount) {
                    layer.close(layIndex);
                }
            }
        });
    }
</script>
</html>